<template>
  <div class="layout">
    <Layout>
      <Header>
        <div>
          <img src="../assets/logo.png" />
          <span>Your Project Name</span>
        </div>
        <div>
          <div class="login_name_info">欢迎您，admin</div>
          <!-- <div style="margin-right:15px;color:#2d8cf0;cursor:pointer;">一键换肤</div> -->
          <Dropdown style="margin-right:15px;">
            <a href="javascript:void(0)">
              一键换肤
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem @click.native="changeColor(1)">摇滚主题</DropdownItem>
              <DropdownItem @click.native="changeColor(2)">新时代主题</DropdownItem>
              <DropdownItem @click.native="changeColor(3)">基础主题</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <Button type="info" @click="removeLogin()">退出</Button>
        </div>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu :active-name="activeName" theme="light" accordion width="auto" :open-names="[1]">
            <Submenu :name="item.id" v-for="(item) in menuList" :key="item.id">
              <template slot="title">
                <Icon :type="item.icon" />
                {{item.pathName}}
              </template>
              <MenuItem
                :name="idx.path"
                :to="'/'+ idx.path"
                v-for="(idx) in item.children"
                :key="idx.id"
              >
                <Icon :type="idx.icon" />
                {{idx.pathName}}
              </MenuItem>
            </Submenu>
            <!-- <Submenu name="2">
              <template slot="title">
                <Icon type="ios-keypad"></Icon>Item 2
              </template>
              <MenuItem name="2-1">Option 1</MenuItem>
              <MenuItem name="2-2">Option 2</MenuItem>
            </Submenu>
            <Submenu name="3">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>Item 3
              </template>
              <MenuItem name="3-1">Option 1</MenuItem>
              <MenuItem name="3-2">Option 2</MenuItem>
            </Submenu>-->
          </Menu>
        </Sider>
        <Layout :style="{padding: '12px 24px'}">
          <router-view></router-view>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      menuList: [
        {
          id: 1,
          path: '',
          pathName: '人员管理',
          icon: 'md-contacts',
          children: [
            { id: 2, path: 'person', pathName: '人员列表', icon: 'md-apps' }
          ]
        },
        {
          id: 3,
          path: '',
          pathName: '菜品管理',
          icon: 'md-restaurant',
          children: [
            { id: 4, path: 'foodMenu', pathName: '菜品列表', icon: 'md-apps' },
            { id: 5, path: 'foodType', pathName: '菜品分类', icon: 'md-apps' }
          ]
        },
        {
          id: 6,
          path: '',
          icon: 'ios-paper',
          pathName: '账单管理',
          children: [
            { id: 7, path: 'syslog', pathName: '账单列表', icon: 'md-apps' }
          ]
        },
        {
          id: 8,
          path: '',
          icon: 'ios-people',
          pathName: '用户管理',
          children: [
            { id: 9, path: 'user', pathName: '用户列表', icon: 'md-apps' }
          ]
        },
        {
          id: 10,
          path: '',
          icon: 'logo-xbox',
          pathName: '权限管理',
          children: [
            { id: 11, path: 'role', pathName: '权限列表', icon: 'md-apps' }
          ]
        }
      ]
    }
  },
  methods: {
    ...mapActions(['togetActiveName']),
    removeLogin() {
      window.sessionStorage.clear()
      this.togetActiveName('')
      this.$router.push('/login')
    },
    // 更换主题
    changeColor(num) {
      // 把className theme1，theme2，theme3挂载在app.vue的<div id="app"></div>上
      document.getElementById('app').className = 'theme' + num
      this.localStorageDate()
    },
    // 存储localStoarge，用于进入系统时，记住用户上一次的选择，自动加载用户上一次选择的主题主题，记得在mounted()里面调用
    localStorageDate() {
      localStorage.setItem('app', document.getElementById('app').className)
    }
  },
  created() {
    if (window.sessionStorage.getItem('activeName')) {
      this.togetActiveName(window.sessionStorage.getItem('activeName'))
    }
  },
  mounted() {},
  computed: {
    ...mapState(['activeName'])
  }
}
</script>
<style lang="less" scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.ivu-layout {
  height: 100%;
}

.login_name_info {
  color: #fff;
  font-size: 1rem;
  margin-right: 15px;
}
// .ivu-layout-sider {
//   background: #515a6e !important;
// }
.ivu-layout-header {
  background-color: #373d05;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  // font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }
    span {
      margin-left: 10px;
      font-size: 18px;
    }
  }
}
</style>
